<template>
	<view>
		<Navgator></Navgator>

			<h3 class="title">热门资产</h3>
			
			<view class="itemView">
				<view class="item" v-for="(item,i) in walletList">
					<image class="itemImage" :src="`../../static/${item.img}`" mode="widthFix"></image>
					<view class="center">
						<label class="name">{{item.name}}</label>
						<label class="addr">{{item.tempaddr}}</label>
					</view>
					<image class="addImg" src="../../static/im105.png" mode="widthFix" @click="addETH(i)"></image>
				</view>
			</view>
	
	</view>
</template>

<script>
	import Navgator from '../../componts/navgator.vue'
	export default {
		components: {
			
			Navgator
		},
		data() {
			return {
				walletList:[],
				ETH:[],
			}
		},
		onLoad(){
			
			this.init()
		},
		methods: {
			init(){
				var that =this
				uni.getStorage({
					key: 'ETH',
					success(res) {
						that.ETH = res.data
						
					}
				})
				this.createWalletLsit()
				
			},
			/**
			 * @param {type} 0为ETH 0x 开头钱包地址  1为 TRX T 开头地址 */
			getWalletAddr(type) {
				let num = ""
				let str = 'abcdefghijklmnopqrstuvwxyz0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ';
				for (let i = 0; i < 32; i++) {
			
					num += str.charAt(Math.floor(Math.random() * str.length));
			
				};
				if (type == 0) {
					return 'Ox' + num
				} else if (type == 1) {
					return 'T' + num
				}
			
			},
			
			addETH(i) {
			return
			if(i==0)
			{
				let ret = this.ETH.find((item) => {
					return item.name == "TRX"
				})
				if (!ret) {
					this.ETH.push(this.walletList[0])
					this.$store.commit('setETH', this.ETH)
					uni.$emit('refreshData'); 
					this.Api.toast("添加成功")
					
				} else {
			
					this.Api.toast("重复添加")
				}
				}
			},
			createWalletLsit(){
				this.walletList=[{
					name:"TRX",
					addr:this.getWalletAddr(0),
					img:'im100.png'
				},
				{
					name:"LON",
					addr:this.getWalletAddr(0),
					img:'im112.png'
				},
				
				{
					name:"WBTC",
					addr:this.getWalletAddr(0),
					img:'im114.png'
				},
				{
					name:"DAI",
					addr:this.getWalletAddr(0),
					img:'im113.png'
				},
				{
					name:"USDC",
					addr:this.getWalletAddr(0),
					img:'im111.png'
				},
				
				{
					name:"LINK",
					addr:this.getWalletAddr(0),
					img:'im110.png'
				}
				]
				
				for(let i in this.walletList){
					this.walletList[i].tempaddr = this.walletList[i].addr.substring(0, 10) + '...' + this.walletList[i].addr.substring(
					this.walletList[i].addr.length - 10, this.walletList[i].addr.length)
				}
			}
		}
	}
</script>

<style scoped>
	.title{
		margin-top: 40rpx;
		margin-left: 20rpx;
	}
	
	.itemView{
		width: 100%;
		margin-top: 40rpx;
		
		display: flex;
		flex-direction: column;
	}
	.item{
		width: 100%;
		display: flex;
		flex-direction: row;
		
		padding: 20rpx;
		box-sizing: border-box;
		border-bottom: 1rpx #E1E0E3 solid;
	}
	.itemImage{
		width: 60rpx;
	}
	.center{
		display: flex;
		flex-direction: column;
		justify-content: center;
		flex: 1;
		margin-left: 40rpx;
	}
	.addImg{
		width: 50rpx;
	}
	.name{
		font-size: 30rpx;
		font-weight: 500;
	}
	.addr{
		font-size: 25rpx;
		color: #B7B7B7;
	}
</style>
